<template>
  <view class="page-my">
    <image :src="addDomain('/static/cloud.png')" class="background">
    </image>
    <view class="block"></view>
    <!-- 用户资料 -->
    <view class="user-box">
      <view class="header" v-if="isNotLogged" @tap="toLogin">
        <view class="img">
          <image src='/static/img/avatar.png'></image>
        </view>
        <view class="group">
          <view>立即登录</view>
        </view>
      </view>
      <view class="header" v-else @tap="toUserSettings">
        <view class="img">
          <image :src="userInfo.pic || '/static/img/avatar.png'" />
        </view>
        <view class="group">
          <view class="name">
            {{userInfo.nickName}}
            <view class="vip">
              铁杆粉丝
            </view>
          </view>
          <view class="text">
            已经成为平台粉丝{{registerTime}}天
          </view>
        </view>
        <view class="setting">
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>
      <view class="bottom">
        <view class="group">
          <view class="item" @tap="toPageByURL('/pages/my-message/my-message')">
            <view class="number">{{messageNum}}</view>
            <view class="text">我的站内信</view>
          </view>
          <view class="item">
            <view class="number">{{userInfo.point || '0'}}</view>
            <view class="text">可用积分</view>
          </view>
          <!-- <view class="item">
            <view class="number">0张</view>
            <view class="text">功能券</view>
          </view>
          <view class="item">
            <view class="number">0张</view>
            <view class="text">卡券包</view>
          </view> -->
        </view>
      </view>
    </view>

  <!--  <view class="banner">
      <swiper class="img" indicator-dots="true" indicator-color="#FFFFFF" indicator-active-color="#65492F"
        autoplay="true" circular="true">
        <swiper-item v-for="(imgItem, imgIdx) in indexImgs" :key="imgIdx" class="item">
          <image :src="imgItem.imgUrl" mode="aspectFill" />
        </swiper-item>
      </swiper>
    </view> -->

    <!-- 我的工具 -->
    <view class="my-con my-tools">
      <view class="tit">
        <view class="text">
          您的权益
        </view>
      </view>
      <view class="con-box">
        <view class="item" @tap="toPageByURL('/pages/my-collection/my-collection')">
          <view class="img">
            <image src="../../static/img/Group-185.png" />
          </view>
          <view class="text">
            我的收藏
          </view>
        </view>
        <view class="item" @tap="toPageByURL('/pages/my-post/my-post')">
          <view class="img">
            <image src="../../static/img/Group-184.png" />
          </view>
          <view class="text">
            我的发帖
          </view>
        </view>
        <view class="item" @tap="pointLog()">
          <view class="img">
            <image src="../../static/img/Group-183.png" />
          </view>
          <view class="text">
            我的积分
          </view>
        </view>
        <view class="item" @tap="toPageByURL('/pages/order/order?orderStatus=0')">
          <view class="dot" v-if="orderTotal>0">{{ orderTotal }}</view>
          <view class="img">
            <image src="../../static/img/Group-182.png" />
          </view>
          <view class="text">
            我的订单
          </view>
        </view>
        <view class="item" @tap="toPageByURL('/pages/address-list/address-list')">
          <view class="img">
            <image src="../../static/img/Group-186.png" />
          </view>
          <view class="text">
            我的地址
          </view>
        </view>
      <!--  <view class="item" @tap="toPageByURL('/pages/my-viewer/my-viewer')">
          <view class="img">
            <image src="../../static/img/Group-187.png" />
          </view>
          <view class="text">
            我的观演人
          </view>
        </view> -->
        <view class="item" @tap="toPageByURL('/pages/my-coupon/coupon')">
            <view class="img">
              <image src="../../static/img/Group-187.png" />
            </view>
            <view class="text">
              我的券包
            </view>
          </view>

        <view class="item" @tap="toCode">
          <view class="img">
            <image src="../../static/img/Group-188.png" />
          </view>
          <view class="text">
            粉丝社群
          </view>
        </view>
        <button open-type="share" class="shareButton item">
          <view class="img">
            <image src="../../static/img/Group-189.png" />
          </view>
          分享
        </button>
      </view>
    </view>
  </view>
  <uni-popup ref="popup" type="center" borderRadius="10px" background-color="white">
    <view class="popup">
      <view class="title">积分详情</view>
      <view class="table">
        <view class="header">
          <view class="one">任务</view>
          <view class="two">积分</view>
          <view class="three">时间</view>
        </view>
        <view class="body">
          <scroll-view scroll-y="true" style="height: 500rpx;" @scrolltolower="onLower" v-if="Log.list">
            <view class="item" v-for="(item,index) in Log.list" :key="index">
              <view class="one" :style="{textAlign:byLength(item.reason)}">{{item.reason}}</view>
              <view class="two">{{item.num > 0 ? '+'+item.num : item.num}}</view>
              <view class="three">{{String(item.createTime).substring(0,16)}}</view>
            </view>
            <view v-if="isLoadAll && Log.list.length>0" class="nomore">
              没有更多了，看看别的吧
            </view>
          </scroll-view>
          <image class="img" src="../../static/empty-img/not-found.png" mode="aspectFit" v-else></image>
        </view>
      </view>
    </view>
  </uni-popup>
  <!-- <uni-popup ref="share" type="bottom" borderRadius="20px 20px 0px 0px" background-color="white">
    <view class="share">
      <view class="title">立即分享给好友</view>
      <scroll-view class="scroll" scroll-x="true">
        <view class="item" @click="toShare(`微信` )">
          <image src="../../static/img/11.png"></image>
          <view class="text">微信</view>
        </view>
        <view class="item" @click="toShare('小红书')">
          <image src="../../static/img/22.png"></image>
          <view class="text">小红书</view>
        </view>
        <view class="item" @click="toShare('群聊')">
          <image src="../../static/img/33.png"></image>
          <view class="text">群聊</view>
        </view>
        <view class="item" @click="toShare(`微信` )">
          <image src="../../static/img/11.png"></image>
          <view class="text">微信</view>
        </view>
        <view class="item" @click="toShare('小红书')">
          <image src="../../static/img/22.png"></image>
          <view class="text">小红书</view>
        </view>
        <view class="item" @click="toShare('群聊')">
          <image src="../../static/img/33.png"></image>
          <view class="text">群聊</view>
        </view>
      </scroll-view>
      <button @tap="close()" class="button">取消</button>
    </view>
  </uni-popup> -->
</template>

<script setup>
  import {
    reactive,
    ref
  } from 'vue'
  import {
    onShareTimeline,
    onShareAppMessage
  } from '@dcloudio/uni-app';
  import http from '../../utils/http';
  // onShareAppMessage(() => {
  //   return {
  //     title: '山海台秀', //分享的标题
  //     path: 'pages/index', //点击分享链接之后进入的页面路径
  //   }
  // })
  // //2.配置分享到朋友圈
  // onShareTimeline(() => {
  //   return {
  //     title: '山海台秀欢迎你的到来！', //分享的标题
  //     query: 'pages/index', //点击分享链接之后进入的页面路径
  //   }
  // })
  const Data = reactive({
    isNotLogged: true, // 未登录
    userInfo: '',
    orderCountInfo: '',
    simpleInfo: '',
    messageNum: 0,
    registerTime: 0,
    indexImgs: []
  })
  const {
    isNotLogged,
    userInfo,
    orderCountInfo,
    messageNum,
    indexImgs,
    registerTime
  } = toRefs(Data)
  onShow(() => {
    // 排除 tempToken 影响，真实登陆后再请求数据
    if (uni.getStorageSync('cloudToken')) {
      queryUserInfo()
      Data.isNotLogged = false
    } else {
      Data.simpleInfo = {}
      Data.orderCountInfo = {}
      Data.userInfo = {}
      Data.isNotLogged = true
      Data.messageNum = 0
      Data.registerTime = 0
    }
    getIndexImgs()
  })

  /**
   * 积分日志查询条件
   */
  const Log = ref({})
  const queryData = ref({
    pageSize: 10,
    pageNum: 1,
    columns: "createTime",
    orders: "DESC"
  })

  /**
   * 获取积分日志
   */
  const popup = ref(null)
  const pointLog = () => {
    if (!uni.getStorageSync('cloudToken')) {
      uni.showModal({
        title: '提示',
        content: '该功能登录后开放哦',
        confirmText: '去登录',
        success: modalRes => {
          if (modalRes.confirm) {
            // 跳转登录页面
            uni.navigateTo({
              url: '/pages/login/login'
            })
          }
        }
      })
      return
    }
    uni.showLoading()
    http.request({
      url: '/mall4cloud_point/u/point/list',
      method: 'GET',
      data: queryData.value
    }).then((res) => {
      if (queryData.value.pageNum === 1) {
        Log.value = res
      } else {
        let list = Log.value.list
        list.push(...res.list)
        Log.value.list = list
      }
      if (queryData.value.pageNum === Log.value.pages) {
        isLoadAll.value = true
      }
      popup.value.open()
      uni.hideLoading()
    }).catch(() => {
      uni.hideLoading()
    })
  }
  /**
   * 日志触底
   */
  const isLoadAll = ref(false)
  const onLower = () => {
    if (queryData.value.pageNum < Log.value.pages) {
      queryData.value.pageNum = queryData.value.pageNum + 1
      pointLog()
    } else {
      isLoadAll.value = true
    }
  }

  /**
   * 获取用户信息
   */
  const queryUserInfo = () => {
    http.request({
      url: '/mall4cloud_user/a/user/ma/user_detail_info',
      method: 'GET'
    }).then(res => {
      Data.userInfo = res
      uni.setStorageSync("cloudUserInfo", Data.userInfo)
      Data.registerTime = computedTime(Data.userInfo.createTime, Data.userInfo.updateTime)
      queryUserMessageNum()
      queryOrder()
    })
  }
  /**
   * 获取用户站内信
   */
  const queryUserMessageNum = () => {
    http.request({
      url: '/mall4cloud_point/u/message/list?pageSize=10&pageNum=1&colums=read,createTime&orders=ASC,DESC',
      method: 'GET'
    }).then(res => {
      Data.messageNum = res.total
    })
  }

  const orderTotal = ref(0)
  const queryOrder = () => {
    http.request({
      url: '/mall4cloud_order/p/myOrder/search_order?status=1&pageNum=1&pageSize=5',
      method: 'GET'
    }).then(res => {
      orderTotal.value = res.total
    })
  }

  /**
   * 计算时间差值
   */
  const computedTime = (time1, time2) => {
    // 创建 Date 对象
    var date1 = new Date(time1.replace(/\-/g, '/'));
    var date2 = new Date(time2.replace(/\-/g, '/'));
    // 将时间戳转换为天数
    var timeDiff = Math.abs(date2 - date1);
    var daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
    return daysDiff

  }

  const toPageByURL = (url) => {
    if (uni.getStorageSync('cloudToken')) {
      uni.navigateTo({
        url: url
      })
    } else {
      uni.showModal({
        title: '提示',
        content: '该功能登录后开放哦',
        confirmText: '去登录',
        success: modalRes => {
          if (modalRes.confirm) {
            // 跳转登录页面
            uni.navigateTo({
              url: '/pages/login/login'
            })
          }
        }
      })
    }
  }

  // 去登陆
  const toLogin = () => {
    uni.navigateTo({
      url: '/pages/login/login'
    })
  }

  // 去二维码
  const toCode = () => {
    uni.navigateTo({
      url: '/pages/activity-code/activity-code'
    })
  }

  // 去用户设置
  const toUserSettings = () => {
    uni.navigateTo({
      url: '/pages/user-settings/user-settings'
    })
  }

  /**
   * 轮播图
   */
  const getIndexImgs = () => {
    http.request({
      url: '/mall4cloud_point/ua/listIndexImg',
      method: 'GET'
    }).then((res) => {
      Data.indexImgs = res
    })
  }
  const share = ref(null)
  const open = () => {
    share.value.open()
  }
  const close = () => {
    share.value.close()
  }
  // 添加图片域名
  const addDomain = (path) => {
      const resourcesUrl = import.meta.env.VITE_APP_FILE_URL
    if (!path || /^http?:\/\//.test(path)) {
      return path
    } else {
      return resourcesUrl + path
    }
  }

  const byLength = (str) => {
    if (String(str).length > 9) {
      return 'left'
    } else {
      return 'center'
    }
  }
</script>

<style>
  page {
    background-color: #F9F6EF;
  }
</style>
<style lang="scss" scoped>
  @use "my";
</style>
